Introducción a SVG

SVG (Scalable Vector Graphics) es un formato de imagen basado en XML para describir gráficos vectoriales en la web. A diferencia de las imágenes rasterizadas (como PNG o JPEG), los gráficos SVG son escalables, lo que significa que se pueden redimensionar sin perder calidad.

Ejemplo básico de SVG

A continuación, te mostramos un ejemplo de código SVG básico:


<svg width="500" height="300">
    <rect x="10" y="10" width="150" height="100" style="fill:rgb(0,0,255);stroke-width:2;stroke:rgb(0,0,0)" />
    <circle cx="300" cy="150" r="50" stroke="black" stroke-width="3" fill="red" />
    <line x1="250" y1="70" x2="400" y2="70" style="stroke:rgb(233,115,4);stroke-width:2" />
    <text x="250" y="50" font-family="Verdana" font-size="35" fill="blue">Hola Web4U</text>
    <path d="M150 150 L75 250 L225 250 Z" stroke="green" stroke-width="3" fill="yellow" />
</svg>

Explicación del código:

Este es un código básico de SVG con diversas etiquetas para dibujar formas geométricas y texto:

<svg>: Define el área del gráfico SVG. Los atributos como width y height determinan el tamaño del área del lienzo.
<rect>: Dibuja un rectángulo. Los atributos width y height definen el tamaño, y el atributo style se utiliza para aplicar colores y bordes.
<circle>: Dibuja un círculo. Los atributos cx y cy definen la posición del centro, r define el radio, stroke define el color del borde, stroke-width define el grosor del borde y fill define el color de relleno.
<line>: Dibuja una línea recta entre dos puntos definidos por los atributos x1, y1 y x2, y2.
<text>: Dibuja texto en el área SVG. Los atributos x y y definen la posición del texto, y los atributos font-family, font-size, fill definen el estilo del texto.
<path>: Dibuja una forma personalizada usando el atributo d que contiene una secuencia de comandos para dibujar líneas y curvas.

Resultado en el navegador

Cuando se visualiza este código en un navegador, el resultado será:

Enlaces de interés

Para más detalles sobre las características de SVG, puedes consultar la Web de W3C.

También te puede ser útil el Tutorial de SVG en W3Schools.